<template>
  <div class="business-container">
    <!-- 搜索筛选区域 -->
    <div class="search-filter">
      <div class="filter-row">
        <div class="filter-left">
          <el-input v-model="searchForm.id" placeholder="商机ID" clearable class="search-input" />
          <el-input v-model="searchForm.customerName" placeholder="客户姓名" clearable class="search-input" />
          <el-input v-model="searchForm.phone" placeholder="手机号" clearable class="search-input" />
          <el-select v-model="searchForm.intentionSubject" placeholder="意向学科" clearable class="search-select">
            <el-option label="请选择" value="" />
            <el-option label="AI智能应用开发(Java)" value="java" />
            <el-option label="AI大模型开发(Python)" value="python" />
            <el-option label="AI鸿蒙开发" value="harmony" />
            <el-option label="AI大数据" value="bigdata" />
            <el-option label="AI嵌入式" value="embedded" />
            <el-option label="AI测试" value="testing" />
            <el-option label="AI运维" value="devops" />
          </el-select>
        </div>
        <div class="filter-right">
          <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
          <el-button @click="resetSearch" class="reset-btn">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 商机列表 -->
    <div class="business-table-wrapper">
      <el-table 
        v-loading="loading"
        :data="businessList" 
        style="width: 100%"
        row-key="id"
        stripe
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center' }"
      >
        <el-table-column prop="id" label="商机ID" width="100" show-overflow-tooltip />
        <el-table-column prop="customerName" label="客户姓名" width="160" show-overflow-tooltip />
        <el-table-column prop="phone" label="手机号" width="160" show-overflow-tooltip />
        <el-table-column prop="intentionSubject" label="意向学科" width="180" show-overflow-tooltip />
        <el-table-column prop="source" label="渠道来源" width="160" show-overflow-tooltip>
          <template #default="scope">
            {{ getSourceText(scope.row.source) }}
          </template>
        </el-table-column>
        <el-table-column prop="education" label="学历" width="140" show-overflow-tooltip>
          <template #default="scope">
            {{ getEducationText(scope.row.education) }}
          </template>
        </el-table-column>
        <el-table-column prop="employmentStatus" label="在职状态" width="120" show-overflow-tooltip>
          <template #default="scope">
            {{ getEmploymentStatusText(scope.row.employmentStatus) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200" show-overflow-tooltip />
        <el-table-column prop="updateTime" label="更新时间" width="200" show-overflow-tooltip />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button 
              size="small" 
              type="primary"
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 查看商机弹窗 -->
    <el-dialog
      v-model="showViewDialog"
      :title="`查看商机(商机ID:${currentBusiness?.id || ''})`"
      width="600px"
      destroy-on-close
    >
      <el-form :model="currentBusiness" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="currentBusiness.phone" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户姓名">
              <el-input v-model="currentBusiness.customerName" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="性别">
              <el-input :value="getGenderText(currentBusiness.gender)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄">
              <el-input v-model="currentBusiness.age" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="微信号">
              <el-input v-model="currentBusiness.wechat" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ">
              <el-input v-model="currentBusiness.qq" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="意向学科">
              <el-input :value="getIntentionSubjectText(currentBusiness.intentionSubject)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意向课程">
              <el-input :value="getIntentionCourseText(currentBusiness.intentionCourse)" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学历">
              <el-input :value="getEducationText(currentBusiness.education)" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在职状态">
              <el-input :value="getEmploymentStatusText(currentBusiness.employmentStatus)" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="渠道来源">
              <el-input :value="getSourceText(currentBusiness.source)" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="currentBusiness.remark" disabled type="textarea" :rows="2" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <!-- 跟进历史 -->
      <div class="follow-history">
        <h3>跟进历史</h3>
        <el-table 
          :data="followHistoryList" 
          style="width: 100%"
          stripe
          size="small"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="followTime" label="跟进时间" width="160" show-overflow-tooltip />
          <el-table-column prop="keyPoints" label="沟通重点" width="120" show-overflow-tooltip />
          <el-table-column prop="status" label="沟通状态" width="180" show-overflow-tooltip />
          <el-table-column prop="notes" label="沟通纪要" show-overflow-tooltip />
          <el-table-column prop="follower" label="跟进人" width="80" show-overflow-tooltip />
        </el-table>
      </div>
      
      <template #footer>
        <el-button @click="showViewDialog = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 搜索表单
const searchForm = ref({
  id: '',
  customerName: '',
  phone: '',
  intentionSubject: ''
});

// 加载状态
const loading = ref(false);

// 商机列表数据
const businessList = ref([]);

// 分页信息
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 400
});

// 弹窗状态
const showViewDialog = ref(false);

// 当前查看的商机
const currentBusiness = ref({});

// 跟进历史列表
const followHistoryList = ref([]);

// 初始化数据
const initData = () => {
  // 模拟数据
  businessList.value = [
    {
      id: '948',
      customerName: '张晓明',
      phone: '18933110099',
      intentionSubject: 'java',
      source: 'online_activity',
      education: 'technical_school',
      employmentStatus: 'following',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    },
    {
      id: '242',
      customerName: '张晓明',
      phone: '13900331177',
      intentionSubject: 'java',
      source: 'online_activity',
      education: 'bachelor',
      employmentStatus: 'following',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    },
    {
      id: '424',
      customerName: '张晓明',
      phone: '18045677788',
      intentionSubject: 'java',
      source: 'online_activity',
      education: 'bachelor',
      employmentStatus: 'following',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    },
    {
      id: '324',
      customerName: '张晓明',
      phone: '13378782211',
      intentionSubject: 'java',
      source: 'online_activity',
      education: 'bachelor',
      employmentStatus: 'following',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    },
    {
      id: '323',
      customerName: '张晓明',
      phone: '13888993330',
      intentionSubject: 'python',
      source: 'promotion',
      education: 'high_school',
      employmentStatus: 'to_assign',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    },
    {
      id: '574',
      customerName: '张晓明',
      phone: '18944559953',
      intentionSubject: 'java',
      source: 'friend_referral',
      education: 'bachelor',
      employmentStatus: 'to_assign',
      createTime: '2025-05-21 08:50:08',
      updateTime: '2025-05-21 08:50:08'
    }
  ];
};

// 搜索处理
const handleSearch = () => {
  loading.value = true;
  // 模拟搜索操作
  setTimeout(() => {
    initData(); // 实际项目中应该根据搜索条件过滤数据
    loading.value = false;
    ElMessage.success('搜索成功');
  }, 500);
};

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    id: '',
    customerName: '',
    phone: '',
    intentionSubject: ''
  };
};

// 分页处理
const handleSizeChange = (size) => {
  pagination.value.pageSize = size;
  handleSearch();
};

const handleCurrentChange = (current) => {
  pagination.value.currentPage = current;
  handleSearch();
};

// 查看商机
const handleView = (business) => {
  currentBusiness.value = { ...business };
  // 模拟跟进历史数据
  followHistoryList.value = [
    {
      followTime: '2025-05-05 10:00:00',
      keyPoints: '价格、位置、师资',
      status: '接通-下次跟进2025-06-20 12:00:00',
      notes: '希望有个优惠的价格',
      follower: '张三'
    },
    {
      followTime: '2025-05-05 10:00:00',
      keyPoints: '位置',
      status: '接通-下次跟进2025-06-30 12:00:00',
      notes: '正在考虑去哪儿学习',
      follower: '张三'
    }
  ];
  showViewDialog.value = true;
};

// 获取渠道来源文本
const getSourceText = (value) => {
  const sourceMap = {
    'online_activity': '线上活动',
    'promotion': '推广介绍',
    'friend_referral': '朋友推荐',
    'search_engine': '搜索引擎'
  };
  return sourceMap[value] || value || '-';
};

// 获取学历文本
const getEducationText = (value) => {
  const educationMap = {
    'high_school': '高中',
    'technical_school': '中专',
    'college': '大专',
    'bachelor': '本科',
    'master': '硕士',
    'doctor': '博士',
    'other': '其他'
  };
  return educationMap[value] || value || '-';
};

// 获取在职状态文本
const getEmploymentStatusText = (value) => {
  const statusMap = {
    'employed': '在职',
    'unemployed': '离职',
    'to_assign': '待分配',
    'following': '跟进中'
  };
  return statusMap[value] || value || '-';
};

// 获取性别文本
const getGenderText = (value) => {
  const genderMap = {
    'male': '男',
    'female': '女'
  };
  return genderMap[value] || value || '-';
};

// 获取意向学科文本
const getIntentionSubjectText = (value) => {
  const subjectMap = {
    'java': 'AI智能应用开发(Java)',
    'python': 'AI大模型开发(Python)',
    'harmony': 'AI鸿蒙开发',
    'bigdata': 'AI大数据',
    'embedded': 'AI嵌入式',
    'testing': 'AI测试',
    'devops': 'AI运维'
  };
  return subjectMap[value] || value || '-';
};

// 获取意向课程文本
const getIntentionCourseText = (value) => {
  const courseMap = {
    'java_fullstack': 'Java全栈开发',
    'python_data': 'Python数据分析',
    'harmony_app': '鸿蒙应用开发',
    'bigdata_dev': '大数据开发'
  };
  return courseMap[value] || value || '-';
};

// 页面加载时初始化
onMounted(() => {
  initData();
});
</script>

<style scoped>
.business-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
}

/* 响应式布局 */
@media (min-width: 1400px) {
  .business-container {
    padding: 20px 20px;
  }
}

.search-filter {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-left {
  display: flex;
  gap: 16px;
  flex: 1;
}

.search-input,
.search-select {
  width: 240px;
}

.filter-right {
  display: flex;
  gap: 10px;
}

.business-table-wrapper {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.follow-history {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.follow-history h3 {
  margin-bottom: 16px;
  color: #303133;
  font-size: 16px;
}
</style>